<template>
	<div class="system-menu-container">
		<div :class="visible ? 'box-modal-hide' : 'box-modal-show'" style="padding: 15px">
			<el-form :model="freight" size="small" label-width="100px" class="mt15 mb15">
				<el-row>
					<el-col :span="6">
						<el-form-item label="名称">
							<el-input v-model="freight.name" placeholder="请输入名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="状态">
							<el-select v-model="freight.status" placeholder="请选择状态" clearable class="w100">
								<el-option label="正常" value="1"></el-option>
								<el-option label="关闭" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item align="right">
							<el-button icon="el-icon-refresh">清空</el-button>
							<el-button type="primary" icon="el-icon-search" @click="submitTap()">立即查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-card shadow="never">
				<div style="padding-bottom: 15px">
					<el-row>
						<el-button type="danger" size="small" icon="el-icon-delete" @click="batchDelTap()">批量删除</el-button>
						<el-button size="small" type="primary" icon="el-icon-edit" @click="openVisible()">添加运费模板</el-button>
					</el-row>
				</div>
				<el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
					<el-table-column fixed type="selection" width="55"></el-table-column>
					<el-table-column label="模板名称">
						<template #default="scope">
							<span>{{ scope.row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="发货地">
						<template #default="scope">
							<span>{{ scope.row.ship_place }}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template #default="scope">
							<span v-if="scope.row.status == 1" class="color-primary">正常</span>
							<span v-else class="color-danger">关闭</span>
						</template>
					</el-table-column>
					<el-table-column label="包邮区域" :show-overflow-tooltip="true">
						<template #default="scope">
							<span>{{ scope.row.postage_free }}</span>
						</template>
					</el-table-column>
					<el-table-column label="不配送区域" :show-overflow-tooltip="true">
						<template #default="scope">
							<span>{{ scope.row.not_delivery }}</span>
						</template>
					</el-table-column>
					<el-table-column label="不包邮地区" :show-overflow-tooltip="true">
						<template #default="scope">
							<span>{{ scope.row.delivery_area }}</span>
						</template>
					</el-table-column>
					<el-table-column label="更新时间">
						<template #default="scope">
							<span>{{ scope.row.updated_at }}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="105">
						<template #default="scope">
							<el-button size="mini" type="text" @click="openVisible(scope.row)">编辑</el-button>
							<el-button size="mini" class="color-danger" type="text" @click="deleteTap(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block" style="margin-top: 15px">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageInfo.now"
						:page-sizes="[10, 20, 50, 100, 200]"
						:page-size="pageInfo.size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageInfo.count"
					>
					</el-pagination>
				</div>
			</el-card>
		</div>
		<detail v-if="visible" :type="type" :data="rowData" @closeTap="handleCloseTap"></detail>
	</div>
</template>

<script>
import { freight_index, freight_del } from '@/api/goods';
import detail from './component/detail.vue';
export default {
	components: { detail },
	name: 'freight',
	data() {
		return {
			freight: {},
			tableData: [],
			pageInfo: {
				now: 1,
				size: 20
			},
			type: 1,
			rowData: {},
			rowId: 0,
			jobsList: [],
			loading: true,
			visible: false,
		};
	},
	created() {
		this.initData();
	},
	watch: {
		$route(to) {
			if (to.query.freightId !== undefined) {
				this.checkDetail(to.query.freightId);
			}
		},
	},
	methods: {
		initData() {
			var param = {
				name: this.freight.name || undefined,
				pageSize: this.pageInfo.size || undefined,
				pageNow: this.pageInfo.now || undefined,
			};
			freight_index({ ...param })
				.then((res) => {
					if (res.statusCode !== 200) {
						this.$message({
							type: 'error',
							message: res.message,
						});
						return true;
					}
					this.pageInfo = res.page;
					this.tableData = res.lists;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		checkDetail(id) {
			this.rowId = parseInt(id);
			this.visible = true;
		},
		openVisible(data = null) {
			if (data !== null) {
				this.type = 1;
				this.rowData = data;
			} else {
				this.rowData = {}
			}
			this.visible = true;
		},
		deleteTap(e) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true;
				freight_del(e.id)
					.then((res) => {
						if (res.statusCode !== 200) {
							this.$message({
								type: 'error',
								message: res.message,
							});
							return true;
						}
						this.initData();
					})
					.finally(() => {
						this.loading = false;
					});
			});
		},
		batchDelTap() {
			this.loading = true;
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = false;
			});
		},
		handleCheckTap(data) {
			this.loading = true;
			this.freightData = data;
			this.visible = true;
		},
		handleEditTap() {
			this.loading = true;
			this.checkShow = true;
		},
		submitTap(){
			this.loading = true;
			this.initData();
		},
		handleCloseTap() {
			this.visible = false;
			this.loading = true;
			this.initData();
		},
		handleSizeChange(val) {
			this.loading = true;
			this.pageInfo.size = val;
			this.initData();
		},
		handleCurrentChange(val) {
			this.loading = true;
			this.pageInfo.now = val;
			this.initData();
		},
	},
};
</script>
